<template>
    <div v-loading="loading" class="bg-white p-4 rounded">
        <el-form :model="form" label-width="160px">
            <el-form-item label="物流查询key">
                        <div>
                                <el-input v-model="form.ship" placeholder="物流查询key">
                                </el-input>
                                <small class="text-gray-500 flex mt-1">
                                用于物流查询信息
                                </small>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="default" @click="submit">保存</el-button>
                    </el-form-item>
        </el-form>

       
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import {
    getSysconfig,
    setSysconfig
} from "@/api/sysconfig.js"
import { toast } from "@/composables/util"



const form = reactive({
   "ship":""
})

const loading = ref(false)

//先处理数据，form内部数据改变之后，会影响html部分数据的渲染
function getData() {
    loading.value = true
    getSysconfig().then(res => {
        for (const k in form) {
            form[k] = res[k]
        }
        //Element UI 的 <el-checkbox-group> 组件要求 v-model 必须是数组类型。当用户勾选复选框时，组件会自动将选中项的 label 值添加到数组中。
        form.password_encrypt = form.password_encrypt.split(",")

    }).finally(() => {
        loading.value = false
    })
}
getData()//渲染默认选中

const submit = () => {
    loading.value = true
    setSysconfig({
        //后端传递该数据是以字符串的形式，使用解构语法可以覆盖特定字段
        ...form
    }).then(res => {
        toast("修改成功")
        getData()
    }).finally(() => {
        loading.value = false
    })
}
</script>
